<template>
	<!-- 根视图组件 -->
	<view>
		<!-- 引入 swiper-banner 组件，传递 swipers 数组、height 高度和 bool 布尔值 -->
		<swiper-banner :swipers="swipers" height="900" bool="true"></swiper-banner>
		<!-- 引入 base-info 组件，传递商品详情信息 -->
		<base-info :detail="detail" :pprice="getGoodsCheckedPrice"></base-info>
		<!-- 引入 scroll-attrs 组件，传递商品属性信息 -->
		<scroll-attrs :attrs="goodsAttrs"></scroll-attrs>
		<!-- 选择弹窗的外层视图 -->
		<view class="pop">
			<!-- 弹窗的内容视图 -->
			<view class="popup d-flex a-center">
				<!-- 弹窗内的列表视图 -->
				<view class="list">
					<!-- 已选属性的视图，点击触发 popup 方法，传入 'attr1' -->
					<view class="choosed my-1" @click="popup('attr1')">
						<text>已选:</text>
						<text>{{getGoodsChecked}}</text>
					</view>
					<!-- 配送信息的视图，点击触发 popup 方法，传入 'attr2' -->
					<view class="run my-2" @click="popup('attr2')">
						<text>配送:</text>
						<text>北京 东城区 现配</text>
					</view>
					<!-- 其他信息的视图，点击触发 popup 方法，传入 'attr3' -->
					<view class="d-flex a-center  my-1" @click="popup('attr3')">
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米自营
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米发货
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							七天无理由退货
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第一个底部弹窗 uni-popup 组件，用于显示底部弹窗，通过 ref 引用 -->
		<uni-popup ref="popup1" type="bottom" border-radius="10px 10px 0 0">
			<!-- 弹窗内容的视图 -->
			<view class="pop-height">
				<view class="content">
					<view class="body">
						<!-- 弹窗顶部的视图 -->
						<view class="d-flex a-center poptop">
							<!-- 图片组件，显示商品图片 -->
							<image src="../../static/images/demo/demo6.jpg" class="m-2"></image>
							<view>
								<!-- p-price 组件，显示商品价格 -->
								<p-price>
									<!-- 通过插槽传递新价格 -->
									<template #newPrice>
										<text class="pprice">￥<text>{{getGoodsCheckedPrice}}</text></text>
									</template>
								</p-price>
								<!-- 显示已选商品信息 -->
								<view class="skus my-2">
									{{getGoodsChecked}}
								</view>
							</view>
						</view>
						<!-- 选择商品属性的视图 -->
						<view class="number">
							<!-- 遍历 selects 数组，渲染每个属性选择器 -->
							<one-adv v-for="(select,index) in selects" :key="index" :title="select.title">
								<!-- 遍历每个属性的选项列表，渲染每个选项 -->
								<color-tag v-for="(item,c) in select.list" :key="c" :color="false" :item="item"
									:bool="select.selected==c" @click.native="changeIndex(index,c)"></color-tag>
							</one-adv>
						</view>
						<!-- 选择购买数量的视图 -->
						<view class="number d-flex j-sb">
							<text class="tit">
								购买数量:
							</text>
							<!-- uni-number-box 组件，用于选择购买数量 -->
							<uni-number-box :min="1" :max="maxStock" v-model="stockval"></uni-number-box>
						</view>
						<!-- 加入购物车按钮，根据库存情况显示不同状态 -->
						<view class="go-cart" v-if="maxStock>0">
							加入购物车
						</view>
						<view class="go-cart stock-bg-color" v-else>
							暂无库存
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 第二个底部弹窗 -->
		<uni-popup ref="popup2" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-height">
				<view class="content">
					<view class="body py-2">
						<!-- 滑动操作组件：按组使用 -->
						<uni-swipe-action ref="unaction">
							<!-- 滑动操作项，遍历地址列表 -->
							<uni-swipe-action-item :right-options="options" @click="onClick(index,$event)" @change="change"
								v-for="(item,index) in list" :key="index">
								<view class="content-box">
									<!-- 显示地址信息 -->
									<text class="content-text">{{item.name}}-{{item.province}}{{item.city}}{{item.district}}{{item.address}}</text>
								</view>
							</uni-swipe-action-item>
						</uni-swipe-action>
						<!-- 添加新地址按钮，点击触发 goAddress 方法 -->
						<view class="go-cart" @click="goAddress">
							添加新地址
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 第三个底部弹窗 -->
		<uni-popup ref="popup3" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-height">
				<view class="content">
					<view class="body text-center py-4">
						七天无理由退货 退货宝
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- u-parse 组件，用于解析和显示富文本内容 -->
		<u-parse :content="content" @preview="preview" @navigate="navigate"></u-parse>
	</view>
</template>

<script>
	// 引入获取商品详情的 API 函数
	import {
		getDetail
	} from '../../api/index.js';
	// 引入 Vuex 的 mapState 辅助函数，用于从 Vuex 存储中映射状态到组件的计算属性
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// 商品 ID
				id: '',
				// 轮播图数组
				swipers: [],
				// 商品详情信息
				detail: {},
				// 商品属性数组
				goodsAttrs: [],
				// 购买数量
				stockval: 1,
				// 最大库存
				// maxStock: 10,
				// 富文本内容
				content: `<img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp">
                            <img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp">
                            <img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp">
                            <img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp">
                            <img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp">
                            <img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp">
                            <img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp">`,
				// 商品属性选择列表
				// selects: [{
				// 		selected: 0,
				// 		title: '颜色',
				// 		list: [{
				// 				id: 1,
				// 				name: '黄色'
				// 			},
				// 			{
				// 				id: 2,
				// 				name: '绿色'
				// 			}
				// 		]
				// 	},
				// 	{
				// 		selected: 0,
				// 		title: '套餐',
				// 		list: [{
				// 				id: 3,
				// 				name: '标配'
				// 			},
				// 			{
				// 				id: 4,
				// 				name: '套餐一'
				// 			}
				// 		]
				// 	}
				// ]
				// 商品属性选择项数组，每个元素包含标题和选项列表
				selects: [],
				// 滑动操作选项，用于地址列表的滑动操作，如编辑、删除等
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		// 页面加载时触发的钩子函数
		onLoad(e) {
			console.log('e=>', e);
			// 获取传递的商品 ID
			this.id = e.key
		},
		// 页面挂载完成后触发的钩子函数
		mounted() {
			// 调用获取商品详情的方法
			this.getdetail()
		},
		// 计算属性
		computed: {
			...mapState({
				list: state => state.address.List
			}),
			// getGoodsChecked 计算属性，用于获取已选商品的名称
			getGoodsChecked() {
				// 遍历 selects 数组，获取每个属性的已选选项名称
				let checkgoodsname = this.selects.map(item => {
					return item.list[item.selected].name
				})
				console.log('checkgoodsname', checkgoodsname);
				// 将已选选项名称用逗号连接成字符串
				return checkgoodsname.join(',')
			},
			// 得到选中的索引
			getGoodsCheckedIndex() {
				let index = -1
				//如果存在这个字段
				if (this.detail.goodsSkus) {
					// 对复杂数据类型的查找使用 findIndex()
					index = this.detail.goodsSkus.findIndex(v => { //indexof()方法是属于字符串的  indexOf()方法是两种方式:基本用法(数组)+指定索引
						// console.log('v.skusText(1111111111)=>',v.skusText); //黄色,标配  黄色,标配  黄色,标配  黄色,标配
						// console.log('v.skusText==this.getGoodsChecked=>',v.skusText==this.getGoodsChecked);
						return v.skusText == this.getGoodsChecked
					})
					console.log('index=>', index);
					return index;
				} else {
					return index;
				}
			},
			// 得到选中的价格
			getGoodsCheckedPrice() {
				let index = this.getGoodsCheckedIndex;
				if (index != -1) {
					return this.detail.goodsSkus[index].pprice;
				} else {
					return this.detail.min_price;
				}
			},
			// 最大库存
			maxStock() {
				let index = this.getGoodsCheckedIndex;
				if (index != -1) {
					return this.detail.goodsSkus[index].stock;
				} else {
					return this.detail.stock;
				}
			}
		},
		// 组件方法
		methods: {
			// getdetail 方法，用于获取商品详情
			getdetail() {
				// 调用获取商品详情的 API 函数
				getDetail(this.id).then(res => {
					console.log('res=>', res);
					console.log('res.data.goodsBanner=>', res.data.goodsBanner);
					// 赋值商品详情信息
					this.detail = res.data;
					// 赋值轮播图信息
					this.swipers = res.data.goodsBanner;
					// 赋值商品属性信息
					this.goodsAttrs = res.data.goodsAttrs;
					// 处理商品属性选择列表
					this.selects = res.data.goodsSkusCard.map((item) => {
						var goodslist = item.goodsSkusCardValue.map(v => {
							return {
								id: v.id,
								name: v.value
							}
						})
						return {
							selected: 0,
							title: item.name,
							list: goodslist
						}
					})
					//对后端给的数据进行字段的增加（修改）
					res.data.goodsSkus.map(item => {
						let arr = []
						for (let index in item.skus) {
							// console.log('index=>',index);//index打印出来时索引0 1 0 1 0 1 0 1
							// console.log('index对应的值=>',item.skus[index]);//index打印对应的值
							// console.log('index对应的值中的value=>',item.skus[index].value);//0：黄色 绿色 1：标配 套餐一
							arr.push(item.skus[index].value)
							// console.log('arr',arr);//打印出的是相应的数组信息，如["黄色"] ["黄色","标配"]
							let skusText = arr.join(',')
							// console.log('skusText=>',skusText);//得到字段，如 黄色   黄色,标配
							item.skusText = skusText //在goodsSkus里面的item.skus中添加了一个skusText字段
						}
					})
					console.log('this.selects ', this.selects);
				})
			},
			// preview 方法，处理图片预览事件
			preview(src, e) {
				// 可根据需要添加具体逻辑
			},
			// navigate 方法，处理链接跳转事件
			navigate(href, e) {
				// 可根据需要添加具体逻辑
			},
			// popup 方法，用于打开相应的弹窗
			popup(attr) {
				if (attr == 'attr1') {
					// 打开第一个弹窗
					this.$refs.popup1.open('bottom')
				} else if (attr == 'attr2') {
					// 打开第二个弹窗
					this.$refs.popup2.open('bottom')
				} else {
					// 打开第三个弹窗
					this.$refs.popup3.open('bottom')
				}
			},
			// changeIndex 方法，用于改变属性选择的索引
			changeIndex(index, c) {
				this.selects[index].selected = c
			},
			onClick(index,e) {
				console.log('eeee',index,e);
				console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
				if(e.index==0){//编辑
					uni.navigateTo({
						url:`/pages/address/address?key=${index}`
					})
				}
				this.$refs.unaction.closeAll() //关闭所有已经打开的组件
			},
			change(event) {
				console.log('改变事件', event);
			},
			goAddress(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
			}
		}
	}
</script>

<style scoped>
	/* 引入 u-parse 组件的样式文件 */
	@import url("@/components/u-parse/u-parse.css");

	/* 选择弹窗的外层视图样式 */
	.pop {
		width: 750rpx;
		height: 300rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	/* 弹窗的内容视图样式 */
	.popup {
		width: 100%;
		height: 300rpx;
		background-color: #eee;
	}

	/* 弹窗内的列表视图样式 */
	.list {
		margin: 0 0 0 20rpx;
	}

	/* 弹窗内容的高度样式 */
	.pop-height {
		height: 900rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	/* 弹窗内容中的图片样式 */
	.content image {
		width: 198rpx;
		height: 204rpx;
	}

	/* 加入购物车按钮样式 */
	.go-cart {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #f70;
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	/* 新价格样式 */
	.pprice {
		font-size: 20rpx;
		color: #f60;
	}

	/* 新价格数字样式 */
	.pprice text {
		font-size: 34rpx;
		color: #f60;
		font-weight: 900;
	}

	/* 修改 u-parse 组件的默认样式 */
	::v-deep .wxParse {
		margin: 0;
		padding: 0;
		line-height: 0;
	}

	.content-box {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-indent: 20rpx;
	}
</style>